<!-- RtmpPlayer.vue -->
<template>
    <div>
      <video
        ref="videoPlayer"
        class="video-js vjs-default-skin"
        controls
        preload="auto"
        width="640"
        height="360"
      ></video>
    </div>
  </template>
  
  <script>
  import { ref, onMounted, onBeforeUnmount } from 'vue';
  import videojs from 'video.js';
  import 'video.js/dist/video-js.css';
  import 'videojs-flash';
  
  export default {
    name: 'RtmpPlayer',
    props: {
      rtmpUrl: {
        type: String,
        required: true,
      },
    },
    setup(props) {
      const videoPlayer = ref(null);
      let player = null;
  
      const initPlayer = () => {
        player = videojs(videoPlayer.value, {
          techOrder: ['flash', 'html5'],
          sources: [{
            src: props.rtmpUrl,
            type: 'rtmp/flv',
          }],
        });
      };
  
      onMounted(() => {
        initPlayer();
      });
  
      onBeforeUnmount(() => {
        if (player) {
          player.dispose();
        }
      });
  
      return {
        videoPlayer,
      };
    },
  };
  </script>
  
  <style scoped>
  .video-js {
    width: 100%;
    height: auto;
  }
  </style>
  